<template>
	<div class="main">
		<vue-particles color="#76aed3" :particleOpacity="0.7" :particlesNumber="50" shapeType="triangle"
			:particleSize="3.5" linesColor="#a0d7f9" :linesWidth="1.5" :lineLinked="true" :lineOpacity="0.7"
			:linesDistance="100" :moveSpeed="3" :hoverEffect="false" hoverMode="grab" :clickEffect="false"
			clickMode="push" class="lizi">
		</vue-particles>
		<el-form :rules="rules" ref="userRegistParam" :model="userRegistParam" class="registbox" v-loading="loading"
			element-loading-text="努力注册中..." element-loading-spinne="el-icon-loading"
			element-loading-background="rgba(0, 0, 0, 0.6)">
			<el-form-item label="头像" style="display:flex;flex-direction:column;flex-wrap:wrap">
				<upload :face="face" @updateFace="updateFace" />
			</el-form-item>
			<el-form-item prop="studentid">
				<el-input type="text" v-model="userRegistParam.studentid" placeholder="请输入学号">
				</el-input>
			</el-form-item>
			<el-form-item prop="username">
				<el-input type="text" v-model="userRegistParam.username" placeholder="请输入用户名">
				</el-input>
			</el-form-item>
			<el-form-item prop="email">
				<el-input type="email" v-model="userRegistParam.email" placeholder="请输入邮箱">
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" auto-complete="false" v-model="userRegistParam.password" placeholder="请输入密码">
				</el-input>
			</el-form-item>
			<el-form-item prop="conpwd">
				<el-input type="password" auto-complete="false" v-model="userRegistParam.conpwd" placeholder="请再次确认密码">
				</el-input>
			</el-form-item>
			<div style="display: flex;justify-content: space-around;">
				<el-button type="primary" style="width:120px;margin-top: 10px;text-align: center;" @click="dosubmit"
					round>提交</el-button>
				<el-button type="primary" style="width:120px;margin-top: 10px;text-align: center;" @click="tologin"
					round>前往登录</el-button>
			</div>
		</el-form>
	</div>
</template>

<script>
import upload from '../components/common/upload.vue';
import {
	Regist,
	uploadFace
} from '../api/api.js'
export default {
	name: "Regist",
	components: {
		upload
	},
	data() {
		const checkpwd = (rule, value, cb) => {
			if (value.length > 5) {
				var modes = 0;
				//正则表达式验证符合要求的
				if (/\d/.test(value)) modes++; //数字
				if (/[A-z]/.test(value)) modes++; //小写
				if (/\W/.test(value)) modes++; //特殊字符					
				if (modes == 1) {
					cb(new Error('密码强度过低,请包含大小写字母、数字、特殊字符中两种及以上'))
				}
				return cb();
			} else {
				cb(new Error('请确保密码长度在6位以上'))
			}
		}
		const confirmpwd = (rule, value, cb) => {
			if (value != this.userRegistParam.password) {
				cb(new Error('两次密码输入不同，请重新输入'))
			}
			return cb();
		}



		return {
			face: '',
			loading: false,
			userRegistParam: {
				studentid: '',
				face: '',
				username: '',
				email: '',
				password: '',
				conpwd: '',
			},


			rules: {
				studentid: [{
					required: true,
					message: '请输入学号',
					trigger: 'blur'
				},
				{ min: 8, max: 15, message: "学号长度在8到15个字符之间", trigger: "change" }],
				username: [{
					required: true,
					message: '请输入用户名',
					trigger: 'blur'
				}, { min: 2, max: 10, message: "用户名长度在2到10个字符之间", trigger: "change" }],
				email: [{
					required: true,
					message: '请输入邮箱',
					trigger: 'blur'
				},
				{
					pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
					message: "邮箱格式错误",
					trigger: ['blur', 'change'],
				}
				],

				password: [{
					required: true,
					message: '请输入密码',
					trigger: 'blur'
				},
				{
					validator: checkpwd,
					trigger: ['blur', 'change'],
				}
				],

				conpwd: [{
					required: true,
					message: '请二次输入密码',
					trigger: 'blur'
				},
				{
					validator: confirmpwd,
					trigger: ['blur', 'change'],
				}

				],

			}
		}

	},

	methods: {
		updateFace(file, type) {
			this.onfilechange(file, type);
		},
		dosubmit: function () {
			this.$refs.userRegistParam.validate((valid) => {
				if (valid) {
					this.loading = true;
					this.userRegistParam.face = this.face;
					let regdata = {
						studentid: this.userRegistParam.studentid,
						face: this.userRegistParam.face,
						username: this.userRegistParam.username,
						email: this.userRegistParam.email,
						password: this.$md5(this.userRegistParam.password)
					}
					Regist(regdata).then(resp => {
						if (resp.data.code == 200) {
							this.$message({
								message: '注册成功',
								type: 'success'
							});
							this.loading = false;
							this.$router.replace('/login')
						} else {
							this.$message({
								message: resp.data.message,
								type: 'error'
							});
							this.loading = false;
						}

					})
				} else {
					this.$message.error('输入格式错误，请检查！')
				}
			})
		},
		tologin() {
			this.$message({
				type: 'success',
				message: '跳转成功'

			})
			this.$router.push('/login');
		},
		// // 二进制流转换为base64 格式。
		// getBase64(data) {
		// 	return new Promise((resolve, reject) => {
		// 		const blob = new Blob([data], {
		// 			type: ['image/jpeg', 'image/png']
		// 		}); //类型一定要写！！！
		// 		const reader = new FileReader();
		// 		reader.readAsDataURL(blob);
		// 		reader.onload = () => resolve(reader.result);
		// 		reader.onerror = (error) => reject(error);
		// 	});
		// },
		onfilechange(file, type) {
			if (!file) {
				return;
			}
			uploadFace(file, type).then(resp => {
				if (resp.data.status == 200) {
					this.face = `http://${resp.data.imageUrl}`;
				} else {
					this.$message({
						message: resp.data.message,
						type: 'error',
						showClose: true
					})
				}

			}).catch(err => {
				this.$message({
					message: err,
					type: 'error',
					showClose: true
				});
			})

		},
	}
}
</script>

<style scoped="scoped">
html {
	margin: 0;
	padding: 0;
}

.main {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	min-height: 100%;
	min-width: 100%;
	max-height: 1550px auto;
	max-width: 750px auto;
	background-color: #FFFFFF;
	z-index: -100;
}

.registbox {
	border-radius: 15px;
	background-clip: padding-box;
	margin: 0 auto;
	margin-top: 100px;
	width: 380px;
	height: 500px;
	padding: 20px 30px;
	background-color: #ffffff;
	box-shadow: 0 15px 25px rgba(212, 212, 212, 0.8);
}

.el-input {
	margin-bottom: 0px;
}

.input_span span {
	display: inline-block;
	width: 80px;
	height: 10px;
	line-height: 10px;
}

.file-upload-design {
	margin: 5px auto auto 8px;
	width: 150px;
	height: 110px;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	border: 1px dashed rgba(55, 191, 237, 0.584);
	display: inline-block;
}

.file-upload-design-icon {
	width: 50px;
	height: 40px;
	background-image: url("https://img.zcool.cn/community/01a1995b349602a80121b994526ed0.png@1280w_1l_2o_100sh.png");
	background-size: 100% 100%;
	margin: 15px 50px 10px 50px;
}

.file-upload-design:hover {
	cursor: pointer;
}

.file-upload-design-txt {
	margin-top: 9px;
	height: 12px;
	font-size: 10px;
	text-align: center;
	color: #AAAAAA;
}

#font span:nth-child(1) {
	color: red;
	margin-left: 110px;
}

#font span:nth-child(2) {
	color: orange;
	margin: 0 60px;
}

#font span:nth-child(3) {
	color: #65d16c;
}

.lizi {
	position: fixed;
	width: 100% !important;
	height: 100% !important;
	z-index: -1;
}
</style>
